<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>

<body>
    <div id="app">
        <!-- <span>第一章文本内容</span>
        <p style="white-space: pre-line;">{{message}}</p>
        <textarea v-model='message'></textarea> -->
        <!-- 2<input type="checkbox" id="name1" value="张俊" v-model='names'>
        <label>张俊</label>
        <input type="checkbox" id="name2" value="张俊1" v-model='names'>
        <label>张俊1</label>
        <input type="checkbox" id="name3" value="张俊2" v-model='names'>
        <label>张俊2</label>
        <input type="checkbox" id="name4" value="张俊3" v-model='names'>
        <label>张俊3</label>
        <input type="checkbox" id="name5" value="张俊4" v-model='names'>
        <label>张俊4</label>
        {{names}} -->
     <!-- <select v-model='css' multiple>
         <option >白龙马</option>
         <option>唐三藏</option>
         <option >李白</option>
         <option >鲁班</option>
   
     </select > -->
     <select v-model='css'>
         <option v-for='c in options' v-bind:value='c.value'>{{c.name}}</option>
     </select>
     {{css}}
    </div>
    <script>
        var vm=new Vue({
           el:'#app',
           data:{
               //message:'',
               //2names:[],
               //如果names是一个空字符串这返回的为确保选中，names会返回true
               css:'',
               options:[
                   {name:'111111',value:'22222'},
                   {name:'113311',value:'20022'},
                   {name:'155111',value:'25222'},
                   {name:'122111',value:'28222'}
               ]
           },
           methods:{}
        });
    </script>
</body>

</html>